<template>
  <div class="practice-container">
    <div class="practice-header">
      <h1>模拟练习</h1>
      <p>通过练习提升您的面试技能</p>
    </div>
    
    <!-- 练习模式选择 -->
    <div class="practice-modes" v-if="!practiceStarted">
      <div class="mode-selection">
        <h3>选择练习模式</h3>
        <div class="modes-grid">
          <div 
            v-for="mode in practiceMode" 
            :key="mode.id"
            class="mode-card"
            :class="{ active: selectedMode === mode.id }"
            @click="selectMode(mode.id)"
          >
            <div class="mode-icon">
              <el-icon>
                <component :is="mode.icon" />
              </el-icon>
            </div>
            <h4>{{ mode.name }}</h4>
            <p>{{ mode.description }}</p>
            <div class="mode-features">
              <el-tag v-for="feature in mode.features" :key="feature" size="small">
                {{ feature }}
              </el-tag>
            </div>
          </div>
        </div>
      </div>
      
      <!-- 专项练习的类型选择 -->
      <div class="stage-selection" v-if="selectedMode === 'targeted'">
        <h3>选择专项练习类型</h3>
        <div class="stages-grid">
          <div 
            v-for="stage in targetedStages" 
            :key="stage.id"
            class="stage-card"
            :class="{ active: selectedStage === stage.id }"
            @click="selectStage(stage.id)"
          >
            <div class="stage-header">
              <el-tag :type="stage.tagType">{{ stage.name }}</el-tag>
              <span class="question-count">{{ stage.questionCount }} 题</span>
            </div>
            <p class="stage-description">{{ stage.description }}</p>
            <div class="stage-difficulty">
              <span>难度：</span>
              <el-rate 
                v-model="stage.difficulty" 
                :max="5" 
                :allow-half="true"
                disabled
                size="small"
              />
            </div>
          </div>
        </div>
      </div>
      
      <!-- 开始练习按钮 -->
      <div class="start-section">
        <el-button 
          type="primary" 
          size="large" 
          @click="startPractice"
          :disabled="!selectedMode || (selectedMode === 'targeted' && !selectedStage)"
        >
          开始练习
        </el-button>
      </div>
    </div>
    
    <!-- 练习进行中 -->
    <div v-else-if="practiceStarted && !practiceCompleted" class="practice-session">
      <!-- 快速练习模式 -->
      <div v-if="selectedMode === 'quick'" class="quick-practice">
        <div class="session-header">
          <div class="session-info">
            <h3>{{ getCurrentStage().name }}</h3>
            <span>第 {{ currentQuestionIndex + 1 }}/{{ currentQuestions.length }} 题</span>
          </div>
          <div class="session-controls">
            <div class="timer">
              <el-icon><Clock /></el-icon>
              <span>{{ formatTime(timeRemaining) }}</span>
            </div>
            <el-button type="text" @click="skipQuestion">
              跳过题目
            </el-button>
            <el-button type="text" @click="changeQuestion">
              换一题
            </el-button>
          </div>
        </div>
        
        <div class="question-area">
          <div class="question-content">
            <div class="question-header">
              <el-tag :type="getCurrentStage().tagType">{{ getCurrentStage().name }}</el-tag>
              <span class="difficulty-indicator">
                难度：
                <el-rate 
                  v-model="currentQuestion.difficulty" 
                  :max="5" 
                  :allow-half="true"
                  disabled
                  size="small"
                />
              </span>
            </div>
            
            <div class="question-text">
              <h4>{{ currentQuestion.title }}</h4>
              <p>{{ currentQuestion.content }}</p>
            </div>
            
            <div class="question-hints" v-if="currentQuestion.hints">
              <el-collapse>
                <el-collapse-item title="💡 提示" name="hints">
                  <ul>
                    <li v-for="hint in currentQuestion.hints" :key="hint">{{ hint }}</li>
                  </ul>
                </el-collapse-item>
              </el-collapse>
            </div>
          </div>
          
          <div class="answer-area">
            <div class="answer-input">
              <el-input 
                v-model="currentAnswer" 
                type="textarea" 
                :rows="8"
                placeholder="请在此输入您的答案..."
                @input="handleAnswerInput"
              />
            </div>
            
            <div class="answer-tools">
              <div class="tool-section">
                <el-button 
                  type="primary" 
                  @click="toggleRecording"
                  :disabled="isRecording"
                >
                  <el-icon><Microphone /></el-icon>
                  {{ isRecording ? '录音中...' : '语音输入' }}
                </el-button>
                
                <el-button 
                  v-if="isRecording" 
                  @click="stopRecording"
                >
                  停止录音
                </el-button>
                
                <el-button @click="getAIHint">
                  <el-icon><Star /></el-icon>
                  AI提示
                </el-button>
              </div>
              
              <div class="real-time-feedback" v-if="currentAnswer">
                <div class="feedback-item">
                  <span class="feedback-label">字数：</span>
                  <span class="feedback-value">{{ currentAnswer.length }}</span>
                </div>
                <div class="feedback-item">
                  <span class="feedback-label">预估用时：</span>
                  <span class="feedback-value">{{ estimatedTime }}分钟</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      
      <!-- 综合练习模式 -->
      <div v-else-if="selectedMode === 'comprehensive'" class="comprehensive-practice">
        <div class="session-header">
          <div class="session-info">
            <h3>综合练习 - {{ getCurrentStage().name }}</h3>
            <span>第 {{ currentQuestionIndex + 1 }}/{{ currentQuestions.length }} 题</span>
          </div>
          <div class="session-controls">
            <div class="timer">
              <el-icon><Clock /></el-icon>
              <span>{{ formatTime(timeRemaining) }}</span>
            </div>
            <el-button type="text" @click="skipQuestion">
              跳过题目
            </el-button>
            <el-button type="text" @click="changeQuestion">
              换一题
            </el-button>
          </div>
        </div>
        
        <div class="question-area">
          <div class="question-content">
            <div class="question-header">
              <el-tag :type="getCurrentStage().tagType">{{ getCurrentStage().name }}</el-tag>
              <el-tag v-if="currentQuestion.isWrongQuestion" type="danger" size="small">
                历史错题
              </el-tag>
              <span class="difficulty-indicator">
                难度：
                <el-rate 
                  v-model="currentQuestion.difficulty" 
                  :max="5" 
                  :allow-half="true"
                  disabled
                  size="small"
                />
              </span>
            </div>
            
            <div class="question-text">
              <h4>{{ currentQuestion.title }}</h4>
              <p>{{ currentQuestion.content }}</p>
            </div>
            
            <div class="question-hints" v-if="currentQuestion.hints">
              <el-collapse>
                <el-collapse-item title="💡 提示" name="hints">
                  <ul>
                    <li v-for="hint in currentQuestion.hints" :key="hint">{{ hint }}</li>
                  </ul>
                </el-collapse-item>
              </el-collapse>
            </div>
          </div>
          
          <div class="answer-area">
            <div class="answer-input">
              <el-input 
                v-model="currentAnswer" 
                type="textarea" 
                :rows="8"
                placeholder="请在此输入您的答案..."
                @input="handleAnswerInput"
              />
            </div>
            
            <div class="answer-tools">
              <div class="tool-section">
                <el-button 
                  type="primary" 
                  @click="toggleRecording"
                  :disabled="isRecording"
                >
                  <el-icon><Microphone /></el-icon>
                  {{ isRecording ? '录音中...' : '语音输入' }}
                </el-button>
                
                <el-button 
                  v-if="isRecording" 
                  @click="stopRecording"
                >
                  停止录音
                </el-button>
                
                <el-button @click="getAIHint">
                  <el-icon><Star /></el-icon>
                  AI提示
                </el-button>
              </div>
              
              <div class="real-time-feedback" v-if="currentAnswer">
                <div class="feedback-item">
                  <span class="feedback-label">字数：</span>
                  <span class="feedback-value">{{ currentAnswer.length }}</span>
                </div>
                <div class="feedback-item">
                  <span class="feedback-label">预估用时：</span>
                  <span class="feedback-value">{{ estimatedTime }}分钟</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      
      <!-- 专项练习模式 -->
      <div v-else-if="selectedMode === 'targeted'" class="targeted-practice">
        <div class="session-header">
          <div class="session-info">
            <h3>专项练习 - {{ getCurrentStage().name }}</h3>
            <span>第 {{ currentQuestionIndex + 1 }}/{{ currentQuestions.length }} 题</span>
          </div>
          <div class="session-controls">
            <div class="timer">
              <el-icon><Clock /></el-icon>
              <span>{{ formatTime(timeRemaining) }}</span>
            </div>
            <el-button type="text" @click="toggleCamera">
              <el-icon><VideoCamera /></el-icon>
              {{ isCameraOn ? '关闭摄像头' : '开启摄像头' }}
            </el-button>
            <el-button type="text" @click="changeQuestion">
              换一题
            </el-button>
          </div>
        </div>
        
        <div class="specialized-layout">
          <div class="video-area">
            <div class="video-container">
              <video ref="videoElement" :class="{ active: isCameraOn }" autoplay muted></video>
              <div v-if="!isCameraOn" class="video-placeholder">
                <el-icon><VideoCamera /></el-icon>
                <span>点击开启摄像头</span>
              </div>
            </div>
          </div>
          
          <div class="question-and-prompt">
            <div class="question-content">
              <div class="question-header">
                <el-tag :type="getCurrentStage().tagType">{{ getCurrentStage().name }}</el-tag>
                <span class="difficulty-indicator">
                  难度：
                  <el-rate 
                    v-model="currentQuestion.difficulty" 
                    :max="5" 
                    :allow-half="true"
                    disabled
                    size="small"
                  />
                </span>
              </div>
              
              <div class="question-text">
                <h4>{{ currentQuestion.title }}</h4>
                <p>{{ currentQuestion.content }}</p>
              </div>
            </div>
            
            <div class="prompt-area">
              <h4>提词板</h4>
              <div class="prompt-content">
                <div class="prompt-points">
                  <div v-for="point in currentQuestion.promptPoints" :key="point" class="prompt-point">
                    • {{ point }}
                  </div>
                </div>
              </div>
            </div>
          </div>
          
          <div class="ai-analysis">
            <h4>AI 实时分析</h4>
            <div class="analysis-content">
              <div class="analysis-item">
                <span class="analysis-label">表情分析：</span>
                <span class="analysis-value">{{ realtimeAnalysis.expression }}</span>
              </div>
              <div class="analysis-item">
                <span class="analysis-label">语调评估：</span>
                <span class="analysis-value">{{ realtimeAnalysis.tone }}</span>
              </div>
              <div class="analysis-item">
                <span class="analysis-label">流畅度：</span>
                <span class="analysis-value">{{ realtimeAnalysis.fluency }}</span>
              </div>
              <div class="analysis-item">
                <span class="analysis-label">建议：</span>
                <span class="analysis-value">{{ realtimeAnalysis.suggestion }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
      
      <div class="session-footer">
        <div class="progress-bar">
          <el-progress 
            :percentage="questionProgress" 
            :stroke-width="6"
            color="#6753C0"
          />
          <span class="progress-text">{{ currentQuestionIndex + 1 }}/{{ currentQuestions.length }}</span>
        </div>
        
        <div class="action-buttons">
          <el-button @click="previousQuestion" :disabled="currentQuestionIndex === 0">
            上一题
          </el-button>
          <el-button 
            type="primary" 
            @click="submitAnswer"
            :disabled="selectedMode === 'targeted' ? !isRecording : !currentAnswer.trim()"
          >
            {{ selectedMode === 'targeted' ? '提交录音' : '提交答案' }}
          </el-button>
          <el-button 
            v-if="currentQuestionIndex === currentQuestions.length - 1" 
            type="success" 
            @click="completePractice"
          >
            完成练习
          </el-button>
        </div>
      </div>
    </div>
    
    <!-- 练习完成 -->
    <div v-else-if="practiceCompleted" class="practice-result">
      <div class="result-header">
        <div class="result-icon">
          <el-icon><Trophy /></el-icon>
        </div>
        <h2>练习完成！</h2>
        <p>恭喜您完成了{{ getCurrentStage().name }}练习</p>
      </div>
      
      <div class="result-content">
        <!-- 成绩概览 -->
        <div class="score-overview">
          <div class="score-circle">
            <el-progress 
              type="circle" 
              :percentage="overallScore" 
              :width="120"
              :stroke-width="8"
              color="#6753C0"
            />
            <div class="score-label">总分</div>
          </div>
          
          <div class="score-details">
            <div class="score-item">
              <span class="score-name">完成度</span>
              <el-progress :percentage="completionRate" :stroke-width="6" />
            </div>
            <div class="score-item">
              <span class="score-name">准确性</span>
              <el-progress :percentage="accuracyRate" :stroke-width="6" />
            </div>
            <div class="score-item">
              <span class="score-name">表达清晰度</span>
              <el-progress :percentage="clarityRate" :stroke-width="6" />
            </div>
          </div>
        </div>
        
        <!-- 雷达图 -->
        <div class="radar-chart">
          <h4>能力评估</h4>
          <div class="radar-placeholder">
            <div class="radar-axis">
              <div class="axis-label" style="top: 0%; left: 50%;">逻辑思维</div>
              <div class="axis-label" style="top: 25%; right: 0%;">专业技能</div>
              <div class="axis-label" style="bottom: 0%; right: 25%;">表达能力</div>
              <div class="axis-label" style="bottom: 0%; left: 25%;">创新思维</div>
              <div class="axis-label" style="top: 25%; left: 0%;">问题解决</div>
            </div>
            <div class="radar-values">
              <div class="value-point" style="top: 20%; left: 50%;" title="逻辑思维: 85分"></div>
              <div class="value-point" style="top: 35%; right: 15%;" title="专业技能: 78分"></div>
              <div class="value-point" style="bottom: 20%; right: 35%;" title="表达能力: 82分"></div>
              <div class="value-point" style="bottom: 15%; left: 30%;" title="创新思维: 75分"></div>
              <div class="value-point" style="top: 30%; left: 20%;" title="问题解决: 88分"></div>
            </div>
          </div>
        </div>
        
        <!-- AI建议 -->
        <div class="ai-suggestions">
          <h4>AI 建议</h4>
          <div class="suggestion-list">
            <div class="suggestion-item">
              <div class="suggestion-icon positive">👍</div>
              <div class="suggestion-content">
                <h5>优势表现</h5>
                <p>您在逻辑思维和问题解决方面表现出色，答题思路清晰，分析问题角度全面。</p>
              </div>
            </div>
            <div class="suggestion-item">
              <div class="suggestion-icon improvement">💡</div>
              <div class="suggestion-content">
                <h5>改进建议</h5>
                <p>建议加强创新思维的练习，可以多思考一些开放性问题的不同解决方案。</p>
              </div>
            </div>
            <div class="suggestion-item">
              <div class="suggestion-icon tip">🎯</div>
              <div class="suggestion-content">
                <h5>练习重点</h5>
                <p>推荐多练习系统设计类题目，提升架构思维和技术深度。</p>
              </div>
            </div>
          </div>
        </div>
      </div>
      
      <div class="result-actions">
        <el-button @click="viewDetailedReport">查看详细报告</el-button>
        <el-button @click="saveResult">保存练习记录</el-button>
        <el-button type="primary" @click="continuePractice">继续练习</el-button>
        <el-button @click="backToHome">回到首页</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import { ref, reactive, computed, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { 
  Clock, 
  Microphone, 
  Star, 
  Trophy,
  VideoCamera,
  Document,
  DataAnalysis,
  Edit
} from '@element-plus/icons-vue'

export default {
  name: 'PracticeView',
  components: {
    Clock,
    Microphone,
    Star,
    Trophy,
    VideoCamera,
    Document,
    DataAnalysis,
    Edit
  },
  setup() {
    const router = useRouter()
    
    const practiceStarted = ref(false)
    const practiceCompleted = ref(false)
    const selectedMode = ref(null)
    const selectedStage = ref(null)
    const currentQuestionIndex = ref(0)
    const currentAnswer = ref('')
    const timeRemaining = ref(1800)
    const isRecording = ref(false)
    
    const practiceMode = ref([
      {
        id: 'quick',
        name: '快速练习',
        description: '按正式面试流程，每种类型抽取2题',
        icon: 'Clock',
        features: ['完整流程', '10题', '快速反馈']
      },
      {
        id: 'comprehensive',
        name: '综合练习',
        description: '包含历史错题的随机练习',
        icon: 'DataAnalysis',
        features: ['历史错题', '随机出题', '深度分析']
      },
      {
        id: 'targeted',
        name: '专项练习',
        description: '针对特定技能的视频练习',
        icon: 'VideoCamera',
        features: ['专项提升', '视频录制', '实时分析']
      }
    ])
    
    const targetedStages = ref([
      {
        id: 'innovation',
        name: '创新类',
        description: '评估创新思维和创造力',
        tagType: 'success',
        questionCount: 12,
        difficulty: 4
      },
      {
        id: 'professional',
        name: '专业技能类',
        description: '测试专业知识和技能应用',
        tagType: 'primary',
        questionCount: 15,
        difficulty: 4.5
      },
      {
        id: 'pressure',
        name: '压力应对类',
        description: '模拟高压环境下的表现',
        tagType: 'warning',
        questionCount: 10,
        difficulty: 4.5
      }
    ])
    
    const questions = reactive({
      // 快速练习题目 - 每种类型2题
      quickQuestions: [
        // 简历匹配 2题
        {
          id: 'resume-1',
          type: 'resume',
          title: '简历匹配 - 工作经验',
          content: '请根据您的工作经验，说明您如何胜任这个职位？',
          difficulty: 3,
          hints: ['结合具体项目经验', '突出相关技能']
        },
        {
          id: 'resume-2',
          type: 'resume',
          title: '简历匹配 - 技能优势',
          content: '请介绍您的核心技能优势，以及如何应用到实际工作中？',
          difficulty: 3,
          hints: ['具体举例说明', '展示学习能力']
        },
        // 逻辑能力 2题
        {
          id: 'logic-1',
          type: 'logic',
          title: '算法分析',
          content: '给定一个数组，找出其中和为目标值的两个数的索引。请分析时间复杂度并给出最优解。',
          difficulty: 3,
          hints: ['可以使用哈希表优化', '考虑空间和时间的权衡']
        },
        {
          id: 'logic-2',
          type: 'logic',
          title: '数据结构',
          content: '如何设计一个支持快速插入、删除和查找的数据结构？',
          difficulty: 4,
          hints: ['考虑平衡二叉树', '分析各种操作的复杂度']
        },
        // 创新类 2题
        {
          id: 'innovation-1',
          type: 'innovation',
          title: '产品创新',
          content: '如果要为盲人用户设计一个移动应用，你会如何设计用户界面和交互方式？',
          difficulty: 4,
          hints: ['考虑无障碍设计', '语音交互', '触觉反馈']
        },
        {
          id: 'innovation-2',
          type: 'innovation',
          title: '技术创新',
          content: '如何利用人工智能技术来改善传统零售行业的用户体验？',
          difficulty: 4,
          hints: ['个性化推荐', '智能客服', '库存管理']
        },
        // 专业技能 2题
        {
          id: 'professional-1',
          type: 'professional',
          title: '系统架构',
          content: '设计一个高并发的电商系统，需要考虑哪些关键技术点？',
          difficulty: 4.5,
          hints: ['负载均衡', '数据库分库分表', '缓存策略']
        },
        {
          id: 'professional-2',
          type: 'professional',
          title: '性能优化',
          content: '如何优化一个响应时间过长的Web应用？',
          difficulty: 4,
          hints: ['数据库优化', '前端缓存', '代码重构']
        },
        // 压力应对 2题
        {
          id: 'pressure-1',
          type: 'pressure',
          title: '紧急问题处理',
          content: '如果线上系统突然崩溃，用户无法访问，你会如何处理？',
          difficulty: 4.5,
          hints: ['快速诊断', '应急预案', '沟通协调']
        },
        {
          id: 'pressure-2',
          type: 'pressure',
          title: '项目延期处理',
          content: '项目即将截止但进度严重滞后，你如何应对？',
          difficulty: 4,
          hints: ['优先级排序', '资源调配', '风险控制']
        }
      ],
      // 综合练习题目 - 包含历史错题
      comprehensiveQuestions: [
        {
          id: 'comp-1',
          type: 'logic',
          title: '复杂算法',
          content: '实现一个LRU缓存，要求O(1)时间复杂度的get和put操作。',
          difficulty: 4.5,
          isWrongQuestion: true,
          hints: ['双向链表 + 哈希表', '维护访问顺序']
        },
        {
          id: 'comp-2',
          type: 'innovation',
          title: '商业模式创新',
          content: '如何为传统图书馆设计一个数字化转型方案？',
          difficulty: 4,
          isWrongQuestion: false,
          hints: ['数字化服务', '用户体验', '商业价值']
        },
        {
          id: 'comp-3',
          type: 'professional',
          title: '微服务架构',
          content: '设计一个微服务架构，需要考虑哪些关键因素？',
          difficulty: 4.5,
          isWrongQuestion: true,
          hints: ['服务拆分', '数据一致性', '监控治理']
        }
      ],
      // 专项练习题目 - 带提词板
      targetedQuestions: {
        innovation: [
          {
            id: 'target-innovation-1',
            type: 'innovation',
            title: '创新思维挑战',
            content: '请设计一个能够解决城市交通拥堵问题的创新解决方案。',
            difficulty: 4,
            promptPoints: [
              '分析交通拥堵的根本原因',
              '考虑技术手段的应用',
              '评估方案的可行性',
              '考虑社会和经济影响'
            ]
          },
          {
            id: 'target-innovation-2',
            type: 'innovation',
            title: '产品创新设计',
            content: '如何为老年人设计一款智能家居产品？',
            difficulty: 4,
            promptPoints: [
              '了解老年人的需求和困难',
              '设计简单易用的界面',
              '考虑安全性和可靠性',
              '提供贴心的服务功能'
            ]
          }
        ],
        professional: [
          {
            id: 'target-professional-1',
            type: 'professional',
            title: '技术架构设计',
            content: '设计一个支持千万级用户的社交平台架构。',
            difficulty: 4.5,
            promptPoints: [
              '分析用户规模和访问特点',
              '选择合适的技术栈',
              '设计可扩展的架构',
              '考虑性能和稳定性'
            ]
          },
          {
            id: 'target-professional-2',
            type: 'professional',
            title: '数据库优化',
            content: '如何优化一个查询性能低下的数据库系统？',
            difficulty: 4,
            promptPoints: [
              '分析查询性能瓶颈',
              '优化SQL语句',
              '设计合理的索引',
              '考虑分库分表策略'
            ]
          }
        ],
        pressure: [
          {
            id: 'target-pressure-1',
            type: 'pressure',
            title: '危机处理',
            content: '公司核心系统遭受网络攻击，如何快速响应？',
            difficulty: 4.5,
            promptPoints: [
              '立即评估损失范围',
              '启动应急响应流程',
              '协调相关部门配合',
              '制定恢复计划'
            ]
          },
          {
            id: 'target-pressure-2',
            type: 'pressure',
            title: '团队冲突管理',
            content: '团队成员之间产生严重分歧，影响项目进度，如何处理？',
            difficulty: 4,
            promptPoints: [
              '了解冲突的根本原因',
              '保持中立和客观',
              '促进有效沟通',
              '寻找共同目标'
            ]
          }
        ]
      }
    })
    
    // 新增状态变量
    const isCameraOn = ref(false)
    const videoElement = ref(null)
    const realtimeAnalysis = ref({
      expression: '自然放松',
      tone: '语调平稳',
      fluency: '流畅度良好',
      suggestion: '保持现状，表现很好'
    })
    
    const currentQuestions = computed(() => {
      if (selectedMode.value === 'quick') {
        return questions.quickQuestions || []
      } else if (selectedMode.value === 'comprehensive') {
        return questions.comprehensiveQuestions || []
      } else if (selectedMode.value === 'targeted' && selectedStage.value) {
        return questions.targetedQuestions[selectedStage.value] || []
      }
      return []
    })
    
    const currentQuestion = computed(() => {
      return currentQuestions.value[currentQuestionIndex.value] || {}
    })
    
    const questionProgress = computed(() => {
      if (currentQuestions.value.length === 0) return 0
      return Math.round(((currentQuestionIndex.value + 1) / currentQuestions.value.length) * 100)
    })
    
    const estimatedTime = computed(() => {
      const wordsPerMinute = 200
      const wordCount = currentAnswer.value.length / 5 // 估算单词数
      return Math.ceil(wordCount / wordsPerMinute)
    })
    
    // 模拟成绩数据
    const overallScore = ref(82)
    const completionRate = ref(95)
    const accuracyRate = ref(78)
    const clarityRate = ref(85)
    
    const selectMode = (modeId) => {
      selectedMode.value = modeId
    }
    
    const selectStage = (stageId) => {
      selectedStage.value = stageId
    }
    
    const getCurrentStage = () => {
      if (selectedMode.value === 'quick') {
        return {
          name: '快速练习',
          tagType: 'primary'
        }
      } else if (selectedMode.value === 'comprehensive') {
        return {
          name: '综合练习',
          tagType: 'success'
        }
      } else if (selectedMode.value === 'targeted' && selectedStage.value) {
        return targetedStages.value.find(stage => stage.id === selectedStage.value) || {}
      }
      return {}
    }
    
    const startPractice = () => {
      practiceStarted.value = true
      currentQuestionIndex.value = 0
      currentAnswer.value = ''
      // 开始计时
      startTimer()
    }
    
    const startTimer = () => {
      const timer = setInterval(() => {
        if (timeRemaining.value > 0) {
          timeRemaining.value--
        } else {
          clearInterval(timer)
          completePractice()
        }
      }, 1000)
    }
    
    const formatTime = (seconds) => {
      const mins = Math.floor(seconds / 60)
      const secs = seconds % 60
      return `${mins.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`
    }
    
    const skipQuestion = () => {
      if (currentQuestionIndex.value < currentQuestions.value.length - 1) {
        currentQuestionIndex.value++
        currentAnswer.value = ''
      }
    }
    
    const changeQuestion = () => {
      // 实现换题逻辑
      console.log('换一题')
    }
    
    const handleAnswerInput = (value) => {
      currentAnswer.value = value
    }
    
    const toggleRecording = () => {
      isRecording.value = !isRecording.value
    }
    
    const stopRecording = () => {
      isRecording.value = false
    }
    
    const getAIHint = () => {
      // 实现AI提示逻辑
      console.log('获取AI提示')
    }
    
    const previousQuestion = () => {
      if (currentQuestionIndex.value > 0) {
        currentQuestionIndex.value--
      }
    }
    
    const submitAnswer = () => {
      // 提交答案逻辑
      console.log('提交答案:', currentAnswer.value)
      
      // 移动到下一题
      if (currentQuestionIndex.value < currentQuestions.value.length - 1) {
        currentQuestionIndex.value++
        currentAnswer.value = ''
      }
    }
    
    const completePractice = () => {
      practiceCompleted.value = true
      // 生成练习结果
    }
    
    const viewDetailedReport = () => {
      // 跳转到详细报告页面
      router.push('/candidate/practice-report')
    }
    
    const saveResult = () => {
      // 保存练习记录
      console.log('保存练习记录')
    }
    
    const continuePractice = () => {
      // 重置状态，开始新的练习
      practiceStarted.value = false
      practiceCompleted.value = false
      selectedMode.value = null
      selectedStage.value = null
      currentQuestionIndex.value = 0
      currentAnswer.value = ''
      timeRemaining.value = 1800
    }
    
    const backToHome = () => {
      router.push('/candidate/dashboard')
    }
    
    // 摄像头相关方法
    const toggleCamera = async () => {
      if (isCameraOn.value) {
        // 关闭摄像头
        const stream = videoElement.value?.srcObject
        if (stream) {
          stream.getTracks().forEach(track => track.stop())
        }
        isCameraOn.value = false
      } else {
        // 开启摄像头
        try {
          const stream = await navigator.mediaDevices.getUserMedia({ video: true })
          if (videoElement.value) {
            videoElement.value.srcObject = stream
          }
          isCameraOn.value = true
        } catch (error) {
          console.error('无法访问摄像头:', error)
        }
      }
    }
    
    // 实时分析更新
    const updateRealtimeAnalysis = () => {
      const expressions = ['自然放松', '略显紧张', '表情丰富', '专注认真']
      const tones = ['语调平稳', '语速适中', '语调生动', '语速偏快']
      const fluencies = ['流畅度良好', '偶有停顿', '非常流畅', '表达清晰']
      const suggestions = ['保持现状，表现很好', '可以适当放松', '注意语速控制', '表现优秀']
      
      realtimeAnalysis.value = {
        expression: expressions[Math.floor(Math.random() * expressions.length)],
        tone: tones[Math.floor(Math.random() * tones.length)],
        fluency: fluencies[Math.floor(Math.random() * fluencies.length)],
        suggestion: suggestions[Math.floor(Math.random() * suggestions.length)]
      }
    }
    
    // 启动实时分析
    const startRealtimeAnalysis = () => {
      if (selectedMode.value === 'targeted') {
        const analysisInterval = setInterval(() => {
          updateRealtimeAnalysis()
        }, 5000) // 每5秒更新一次
        
        // 组件销毁时清理
        onMounted(() => {
          return () => {
            clearInterval(analysisInterval)
          }
        })
      }
    }
    
    return {
      practiceStarted,
      practiceCompleted,
      selectedMode,
      selectedStage,
      currentQuestionIndex,
      currentAnswer,
      timeRemaining,
      isRecording,
      practiceMode,
      targetedStages,
      currentQuestions,
      currentQuestion,
      questionProgress,
      estimatedTime,
      overallScore,
      completionRate,
      accuracyRate,
      clarityRate,
      isCameraOn,
      videoElement,
      realtimeAnalysis,
      selectMode,
      selectStage,
      getCurrentStage,
      startPractice,
      formatTime,
      skipQuestion,
      changeQuestion,
      handleAnswerInput,
      toggleRecording,
      stopRecording,
      getAIHint,
      previousQuestion,
      submitAnswer,
      completePractice,
      viewDetailedReport,
      saveResult,
      continuePractice,
      backToHome,
      toggleCamera,
      updateRealtimeAnalysis,
      startRealtimeAnalysis
    }
  }
}
</script>

<style scoped>
.practice-container {
  min-height: 100vh;
  background: #f8f9fa;
  padding: 20px;
}

.practice-header {
  text-align: center;
  margin-bottom: 32px;
}

.practice-header h1 {
  color: #333;
  margin-bottom: 8px;
}

.practice-header p {
  color: #666;
  margin: 0;
}

.practice-modes {
  max-width: 1200px;
  margin: 0 auto;
}

.mode-selection,
.stage-selection {
  background: white;
  padding: 24px;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  margin-bottom: 24px;
}

.mode-selection h3,
.stage-selection h3 {
  color: #333;
  margin-bottom: 20px;
}

.modes-grid,
.stages-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
}

.mode-card,
.stage-card {
  border: 2px solid #e4e7ed;
  border-radius: 8px;
  padding: 20px;
  cursor: pointer;
  transition: all 0.3s;
}

.mode-card:hover,
.stage-card:hover {
  border-color: #6753C0;
  transform: translateY(-2px);
}

.mode-card.active,
.stage-card.active {
  border-color: #6753C0;
  background: #f8f6ff;
}

.mode-icon {
  font-size: 32px;
  color: #6753C0;
  margin-bottom: 12px;
}

.mode-card h4,
.stage-card h4 {
  color: #333;
  margin-bottom: 8px;
}

.mode-card p,
.stage-card p {
  color: #666;
  margin-bottom: 12px;
}

.mode-features {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.stage-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.question-count {
  font-size: 14px;
  color: #666;
}

.stage-description {
  color: #666;
  margin-bottom: 16px;
}

.stage-difficulty {
  display: flex;
  align-items: center;
  gap: 8px;
}

.stage-difficulty span {
  font-size: 14px;
  color: #666;
}

.start-section {
  text-align: center;
  padding: 24px;
}

.practice-session {
  max-width: 1000px;
  margin: 0 auto;
}

.session-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: white;
  padding: 20px;
  border-radius: 8px;
  margin-bottom: 20px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.session-info h3 {
  color: #333;
  margin: 0 0 4px 0;
}

.session-info span {
  color: #666;
  font-size: 14px;
}

.session-controls {
  display: flex;
  align-items: center;
  gap: 16px;
}

.timer {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #f0f2f5;
  padding: 8px 16px;
  border-radius: 20px;
  font-weight: 500;
}

.question-area {
  background: white;
  border-radius: 8px;
  padding: 24px;
  margin-bottom: 20px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.question-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.difficulty-indicator {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: #666;
}

.question-text {
  margin-bottom: 20px;
}

.question-text h4 {
  color: #333;
  margin-bottom: 12px;
}

.question-text p {
  color: #666;
  line-height: 1.6;
}

.question-hints {
  margin-bottom: 20px;
}

.answer-input {
  margin-bottom: 16px;
}

.answer-tools {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.tool-section {
  display: flex;
  gap: 12px;
}

.real-time-feedback {
  display: flex;
  gap: 20px;
}

.feedback-item {
  display: flex;
  align-items: center;
  gap: 8px;
}

.feedback-label {
  color: #666;
  font-size: 14px;
}

.feedback-value {
  color: #333;
  font-weight: 500;
}

.session-footer {
  background: white;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.progress-bar {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 20px;
}

.progress-text {
  min-width: 80px;
  text-align: center;
  color: #666;
}

.action-buttons {
  display: flex;
  justify-content: center;
  gap: 16px;
}

/* 专项练习模式样式 */
.specialized-layout {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 20px;
  margin-bottom: 20px;
}

.video-area {
  background: white;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.video-container {
  position: relative;
  width: 100%;
  height: 240px;
  border-radius: 8px;
  overflow: hidden;
  background: #f0f2f5;
}

.video-container video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 8px;
}

.video-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: #666;
  font-size: 16px;
}

.video-placeholder .el-icon {
  font-size: 48px;
  margin-bottom: 12px;
}

.question-and-prompt {
  background: white;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.question-content {
  margin-bottom: 24px;
}

.prompt-area h4 {
  color: #333;
  margin-bottom: 16px;
}

.prompt-content {
  background: #f8f9fa;
  padding: 16px;
  border-radius: 8px;
  border-left: 4px solid #6753C0;
}

.prompt-points {
  color: #666;
  line-height: 1.6;
}

.prompt-point {
  margin-bottom: 8px;
}

.prompt-point:last-child {
  margin-bottom: 0;
}

.ai-analysis {
  background: white;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.ai-analysis h4 {
  color: #333;
  margin-bottom: 16px;
}

.analysis-content {
  background: #f8f9fa;
  padding: 16px;
  border-radius: 8px;
}

.analysis-item {
  display: flex;
  align-items: center;
  margin-bottom: 12px;
}

.analysis-item:last-child {
  margin-bottom: 0;
}

.analysis-label {
  min-width: 80px;
  color: #666;
  font-size: 14px;
}

.analysis-value {
  color: #333;
  font-weight: 500;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .specialized-layout {
    grid-template-columns: 1fr;
  }
  
  .video-container {
    height: 180px;
  }
  
  .modes-grid,
  .stages-grid {
    grid-template-columns: 1fr;
  }
}

.practice-result {
  max-width: 1000px;
  margin: 0 auto;
  text-align: center;
}

.result-header {
  margin-bottom: 32px;
}

.result-icon {
  font-size: 64px;
  color: #f39c12;
  margin-bottom: 16px;
}

.result-header h2 {
  color: #333;
  margin-bottom: 8px;
}

.result-header p {
  color: #666;
  margin: 0;
}

.result-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-bottom: 32px;
}

.score-overview,
.radar-chart,
.ai-suggestions {
  background: white;
  padding: 24px;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.ai-suggestions {
  grid-column: 1 / -1;
}

.score-overview {
  display: flex;
  align-items: center;
  gap: 24px;
}

.score-circle {
  text-align: center;
}

.score-label {
  margin-top: 8px;
  color: #666;
  font-size: 14px;
}

.score-details {
  flex: 1;
}

.score-item {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 16px;
}

.score-item:last-child {
  margin-bottom: 0;
}

.score-name {
  min-width: 80px;
  color: #333;
  font-size: 14px;
}

.radar-chart h4,
.ai-suggestions h4 {
  color: #333;
  margin-bottom: 16px;
  text-align: left;
}

.radar-placeholder {
  position: relative;
  width: 300px;
  height: 300px;
  margin: 0 auto;
  border: 2px solid #e4e7ed;
  border-radius: 50%;
}

.radar-axis {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.axis-label {
  position: absolute;
  font-size: 12px;
  color: #666;
  transform: translate(-50%, -50%);
}

.radar-values {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.value-point {
  position: absolute;
  width: 8px;
  height: 8px;
  background: #6753C0;
  border-radius: 50%;
  transform: translate(-50%, -50%);
}

.suggestion-list {
  text-align: left;
}

.suggestion-item {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 20px;
  padding: 16px;
  background: #f8f9fa;
  border-radius: 8px;
}

.suggestion-item:last-child {
  margin-bottom: 0;
}

.suggestion-icon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  flex-shrink: 0;
}

.suggestion-icon.positive {
  background: #d4edda;
  color: #155724;
}

.suggestion-icon.improvement {
  background: #fff3cd;
  color: #856404;
}

.suggestion-icon.tip {
  background: #cce5ff;
  color: #0056b3;
}

.suggestion-content h5 {
  color: #333;
  margin: 0 0 8px 0;
}

.suggestion-content p {
  color: #666;
  margin: 0;
  line-height: 1.5;
}

.result-actions {
  display: flex;
  justify-content: center;
  gap: 16px;
}
</style> 